/* panel -------------------------------------------------------------------- */
a.trigger {
    position: absolute;
    background: #88bbd4 url(../images/plus.png) 6% 55% no-repeat;
    text-decoration: none;
    font-size: 14px;
    font-family: "Trebuchet MS", Georgia, Arial, Helvetica, sans-serif;
    color: #fff !important;
    padding: 4px 12px 6px 24px;
    font-weight: normal;

    z-index: 2;

    left: 0;
    border-top-right-radius: 5px;
    -moz-border-radius-topright: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    border-bottom-right-radius: 5px;

    width: 25px;
    margin-left: 0px !important;
}

a.trigger:hover {
    background-color: #59B;
}

a.active.trigger {
    background: #666 url(../images/minus.png) 6% 55% no-repeat;
}

.panel {
    color: #CCC;
    position: absolute;
    display: none;
    background: #000000;
    width: 250px;
    height: auto;

    z-index: 1;

    left: 0;
    padding: 40px 30px 20px 20px;
    border-top-right-radius: 15px;
    -moz-border-radius-topright: 15px;
    -webkit-border-top-right-radius: 15px;
    -moz-border-radius-bottomright: 15px;
    -webkit-border-bottom-right-radius: 15px;
    border-bottom-right-radius: 15px;

    margin-left: 0px !important;
}

#tolc_user, #tolc_cms, #tolc_users, #tolc_about {
    clear: both;
    padding-bottom: 0px;
}

#panel h1 {
    font-family: "Trebuchet MS", Georgia, Arial, Helvetica, sans-serif;
    font-size: 17px;
    text-align: left;
    letter-spacing: 1px;
    color: #ffffff;
    margin: 15px 0 5px 0;
}

#gravatar {
    float: left;
    padding: 5px 10px 5px 0;
    border: none;
    background: none;
}

#gravatar_profile {
    border: none !important;
}

/* based on http://spyrestudios.com/demos/sliding-panel-left/ */
#panel p {
    font-family: "Trebuchet MS", Georgia, Arial, Helvetica, sans-serif;
    font-size: 13px;
    text-align: left;
    margin: 0 0 5px 15px;
    padding: 0;
    color: #cccccc;
}

#panel a, #panel a:visited {
    margin: 0;
    padding: 0;
    color: #9FC54E;
    text-decoration: none;
    border-bottom: 1px solid #9FC54E;
}

#panel a:hover, #panel a:visited:hover {
    margin: 0;
    padding: 0;
    color: #ffffff;
    text-decoration: none;
    border-bottom: 1px solid #ffffff;
}

#panel a img {
    border: none;
}

#panel ul{
    padding: 0;
    margin: 0;
    list-style-type: none;
}

#panel ul li{
    font-family: "Trebuchet MS", Georgia, Arial, Helvetica, sans-serif;
    font-size: 13px;
    text-align: left;
    padding: 0;
    margin: 0 0 0 15px;
    list-style-type: none;
}

/* about tolc --------------------------------------------------------------- */
#tolc_copyright {
    margin-top: 20px;
}

#tolc_license {
    font-size: 12px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    text-align: left;
}

/* user form ---------------------------------------------------------------- */
#user_form input, select {
    margin: 5px 0;
    padding: 5px;
    color: #6A6969;
    border-width: 1px;
    border-style: solid;
    border-color: #D4D4D4 #EBEBEB #EBEBEB #D4D4D4;
    font-family: 'Trebuchet MS', Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    float: left;
    border-radius: 5px;
}

#user_form input:focus, select:focus {
    color: #7BA857;
    background: #EFFAE6;
}

/* http://css-tricks.com/examples/hrs/ */
#user_form hr {
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

#user_form label {
    font-family: 'Trebuchet MS', Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: normal;
    color: #000000;
    width: 25%;
    float: left;
    text-align: right;
    padding-right: 10px;
    padding-top: 10px;
}

#username, #old_password, #new_password, #repeat_new_password {
    width: 30%;
}

#fullname, #email, #url {
    width: 60%;
}

.password_tools {
    display: inline-block;
    width: 100px;
    margin-top: 10px;
    font-size: 12px;
    text-align: left;
}

.password_strength {
    display: inline-block;
    width: 30px;
    margin-top: 10px;
    font-size: 12px;
    text-align: left;
    color: red;
}

/* active elements ---------------------------------------------------------- */
.over {
    outline: 1px solid #ff0000 !important;
    cursor: crosshair !important;
    opacity: 0.5 !important;
}

/* misc --------------------------------------------------------------------- */
.field_container {
    width: 95%;
    height: 40px;
    clear: both;
    margin: auto;
}

.required {
    color: #9c1821 !important;
    font-weight: bold !important;
}

/* help tips */
.help_call {
    display: none;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    float: left;
}

#help_toggle_div {
    text-align: right;
    padding-right: 10px;
    font-size: 10px;
}

/* qtip2 styling */
.ui-tooltip {
    max-width: 500px;
    max-height: 400px;
    overflow: auto;
}